import React, { useState } from 'react';
import { Layout, Menu, Button, Switch } from 'antd';
import { DashboardOutlined, UserOutlined, SettingOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '../../contexts/ThemeContext';
import Home from '../Home';

const { Header, Sider, Content } = Layout;

// 管理员仪表盘组件
const AdminDashboard: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false); // 侧边栏折叠状态
  const { isDarkMode, isEnglish, toggleTheme, toggleLanguage } = useTheme(); // 获取主题和语言状态
  const navigate = useNavigate(); // 用于页面导航

  // 处理用户退出登录的函数
  const handleLogout = () => {
    localStorage.removeItem('token'); // 移除本地存储中的 token
    localStorage.removeItem('userRole'); // 移除本地存储中的用户角色
    navigate('/login'); // 导航到登录页面
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed} width={256}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <DashboardOutlined />,
              label: isEnglish ? 'Dashboard' : '仪表板', // 根据语言状态显示标签
            },
            {
              key: '2',
              icon: <UserOutlined />,
              label: isEnglish ? 'User Management' : '用户管理', // 根据语言状态显示标签
            },
            {
              key: '3',
              icon: <SettingOutlined />,
              label: isEnglish ? 'Settings' : '系统设置', // 根据语言状态显示标签
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <div className="header-right">
            <div className="theme-switch">
              <span>{isEnglish ? 'Theme: ' : '主题：'}</span>
              <Switch
                checkedChildren="🌙"
                unCheckedChildren="☀️"
                checked={isDarkMode}
                onChange={toggleTheme}
              />
            </div>
            <div className="language-switch">
              <span>{isEnglish ? 'Language: ' : '语言：'}</span>
              <Switch
                checkedChildren="EN"
                unCheckedChildren="中"
                checked={isEnglish}
                onChange={toggleLanguage}
              />
            </div>
            <Button type="primary" onClick={handleLogout}>
              {/* // 根据语言状态显示按钮文字 */}
              {isEnglish ? 'Logout' : '退出登录'} 
            </Button>
          </div>
        </Header>
        <Content>
          <Home />
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminDashboard;